<template>
  <div>
    <h1>{{$store.state.count}}</h1>
    <p>商品详情</p>
    <p>动态路由：路由地址中包含变量，可以发生变化.使用场景：从列表页跳转到详情页，详情页页面结构相似、数据不同而且页面很多。</p>
    <span>{{$route.params.name}}</span>
    <el-button type="primary" @click="add">加入购物车</el-button>
    <br>
    <p>购物车数量：{{$store.state.count}}</p>
    <hr>
    <el-input type="text" v-model.number="money" />
    <input type="radio" value="￥" v-model="type">￥
    <input type="radio" value="$" v-model="type">$
    <el-button type="danger" @click="charge">充值</el-button>
    <el-button type="danger" @click="chargeObj">充值(对象风格)</el-button>
    <p>账户余额：{{$store.state.money}}</p>
    <router-link to="/goodsdetail/空调">空调</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img: '',
      money: 0,
      type: '$'
    }
  },
  watch: {
    $route(val) {
      console.log('我正在从数据库获取'+this.$route.params.name+'的数据...');
    }
  },
  created() {
    console.log('我正在从数据库获取'+this.$route.params.name+'的数据...');
    // console.log(this.$route.meta.title);
    document.title = this.$route.meta.title
    return
    $ajax({
      url: 'xxxx',
      success(res) {
        this.img = res.img
      }
    })
  },
  methods: {
    add() {
      // 修改store中的值,commit一个mutation。第一个参数是事件类型，后面的参数是数据
      this.$store.commit('addNum');
    },
    charge() {
      this.$store.commit('chargeMoney', {
        num: this.money,
        type: this.type
      });
    },
    // 对象风格的提交方式，整体是一个对象
    chargeObj() {
      this.$store.commit({
        type: 'chargeMoneyObj',
        num: this.money,
        moneyType: this.type
      });
    }
  }
  // beforeRouteUpdate(to, from, next) {
  //   console.log('我正在从数据库获取'+to.params.name+'的数据...');
  //   next()
  // }
}
</script>

<style>

</style>